﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>高德地图</title>
</head>
<body>
    <div id="container"></div>
    <input type="hidden" id ="lngLat" value =""/>
</body>
</html>

<style type="text/css">
    body {
        margin:0;
    }
    #container {
        width: 900px;
        height: 500px;
        margin:0px;
        padding:0px;
    }
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1969aaf7ae7e0dae88a1515a4f4496d3"></script>
<script type="text/javascript">
    var _lines = new Array();
    var _markers = new Array();
    var _lngLats = new Array();

    var map = new AMap.Map('container');
    map.setZoom(10);
    map.setCenter([118.781586, 32.042141]);

    var mapClick = function (e) {
        if (_lngLats.length > 0) {
            var lngLat = _lngLats[_lngLats.length-1];
            var points = lngLat.getLat() + "," + lngLat.getLng() + ";" + e.lnglat.getLat() + "," + e.lnglat.getLng() + ";";
            showLine(points, "#FF0000");
        }
        _lngLats.push(e.lnglat);
        window.external.ShowGetPoint(e.lnglat.getLat(), e.lnglat.getLng());
    }

    // 添加地图点击事件
    function addMapClickEvent() {
        map.on('click', mapClick);
    }
    
    // 移除地图点击事件
    function removeMapClickEvent() {
        map.off('click', mapClick);
    }

    // 显示坐标点
    function showPoint(lat, lng) {
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [lng, lat]
        });
        marker.setMap(map);
        _markers.push(marker);
        map.setCenter([lng, lat]);
    }

    // 显示折线
    function showLine(points,color) {
        var path = new Array();

        var pointArr = points.split(';');
        for (var i = 0; i < pointArr.length; i++) {
            if (pointArr[i].length == 0) {
                continue;
            }

            var lngLat = pointArr[i].split(',');
            var p = new Array();
            p.push(lngLat[1]);
            p.push(lngLat[0]);

            path.push(p);
        }

        var polyline = new AMap.Polyline({
            path: path,           //设置线覆盖物路径
            strokeColor: color ,     //"#3366FF" 线颜色
            strokeOpacity: 1,        //线透明度
            strokeWeight: 2,         //线宽
            strokeStyle: "solid",    //线样式
            strokeDasharray: [10, 5] //补充线样式
        });
        polyline.setMap(map);
        _lines.push(polyline);
        map.setCenter(path[0]);
    }

    // 开始取点
    function startGetPoint() {
        addMapClickEvent();
    }

    // 停止取点
    function endGetPoint() {
        removeMapClickEvent();
        _lngLats.length = 0;
    }

    // 清理地图
    function clearMap() {
        map.remove(_markers);
        map.remove(_lines);

        _markers.length = 0;
        _lines.length = 0;
    }
</script>
